<template lang="pug">
el-dialog(
    :title="title"
    width="450px"
    :visible="visibleDialog"
    :modal="isModal"
    destroy-on-close
    @close="handleCancel"
  )
    el-checkbox-group.flex.wrap.justify-s(v-model="checkList")
     .check-g(v-for="item in studentArr")
       el-checkbox(:label="item") {{item}}
    .add-btn
     el-button(@click="handleCancel") 取消
     el-button(type="primary" @click="save" v-if="btnName !== '套入' ||  checkList.length === 0") {{btnName}}
     el-popconfirm(
        confirm-button-text='确定'
        cancel-button-text='取消'
        icon="el-icon-info"
        icon-color="red"
        @confirm="saveBtn"
        @onConfirm="saveBtn"
        v-else
        title="您确认要套入“苗苗音乐”版型吗？"
     )
      el-button.sure-btn(type="primary" slot="reference"  ) {{btnName}}

</template>
<script>

export default {

  props: {
    studentArr: {
      type: Array,
      default: () => []
    },
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '选择学生'
    },
    btnName: {
      type: String,
      default: '保存'
    },
    isModal: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      checkList: []
    }
  },
  computed: {
    visibleDialog: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('update:visible', val)
      }
    }

  },
  methods: {
    handleCancel () {
      this.visibleDialog = false
    },
    save () {
      if (this.checkList.length === 0) {
        this.$message.warning('请选择学生')
        return
      }
      this.$emit('save', this.checkList)
      this.handleCancel()
    },
    saveBtn () {
      this.$emit('save', this.checkList)
      this.handleCancel()
    }
  }
}
</script>
<style lang="scss">
.add-btn {
    text-align: right;
    margin-top: 20px;
}
.check-g {
    margin-right: 15px;
    width: 80px;
    margin-bottom: 10px;
}
.sure-btn {
  display: inline-block;
  margin-left: 10px;
}
</style>
